import { inputCpmGetter, t, useFormItemConfig, useTableItemConfig } from '@/utils/common'
import { CommonList } from '@longnows/ui'
import { Button, Modal } from 'ant-design-vue'
import { FunctionalComponent, reactive, ref } from 'vue'

export const useCommonModalHook = () => {
  const isCommonModalShow = ref(false)
  const commonListRef = ref(null)
  const openCommonModal = () => {
    isCommonModalShow.value = true
  }


 <% if (typeof queryFields !== 'undefined' && Array.isArray(queryFields) && queryFields.length > 0) { %>
  const schemas = ref<SchemaCpm[]>([
    <% queryFields.forEach(function(param) { %>
      {
        ...useFormItemConfig('<%= param.description %>', '<%= param.fieldName %>', 24),
        ...inputCpmGetter(null, {}),
      },
    <% }); %>
  ])
  <% } else { %>
  const schemas = ref<SchemaCpm[]>([
    {
      ...useFormItemConfig('企业名称', 'name', 24),
      ...inputCpmGetter(null, {}),
    },
  ])
  <% } %>



  <% if (typeof listFields !== 'undefined' && Array.isArray(listFields) && listFields.length > 0) { %>
  const columnsList = ref([
  <% listFields.forEach(function(param) { %>
    useTableItemConfig(t('<%= param.description %>'), '<%= param.fieldName %>', 200),
  <% }); %>
  ])
    <% } else { %>
  const columnsList = ref([
    useTableItemConfig(t('企业名称'), 'name', 200),
    useTableItemConfig(t('企业英文名称'), 'nameEnglish', 200),
    useTableItemConfig(t('企业社会信用代码'), 'sccd', 200),
    useTableItemConfig(t('制裁类型'), 'controlType', 200),
  ])
    <% } %>


  const customActions = [
    {
      command: 'export',
      type: 'primary-plain',
      label: '导出',
      disabled: false,
      need: true,
    },
  ]
  const actionFun = reactive({
    export: {},
  })

  //获取查询下拉选项
  const getSelectOptions = () => {}
  const getList = (searchReq: Recordable, pageReq: Recordable) => {
    console.log('🚀 ~ getList ~ pageReq:', pageReq)
    console.log('🚀 ~ getList ~ searchReq:', searchReq)
    return Promise.resolve({
      code: 0,
      data: [{}],
      total: 0,
    })
  }

  const CommonModal: FunctionalComponent = () => {
    return isCommonModalShow.value ? (
      <Modal
        title={t('弹框模板')}
        visible={isCommonModalShow.value}
        onCancel={() => {
          isCommonModalShow.value = false
        }}
        footer={null}
        width={1200}
        destroyOnClose={true}
      >
        <div style={'margin: 20px;height: 400px;'}>
          <CommonList
            ref={commonListRef}
            customColumns={columnsList.value}
            getList={getList}
            paginationProps={{ hideOnSinglePage: true }}
            customActions={customActions}
            actionFun={actionFun}
            customSchemas={schemas.value}
            getOptions={getSelectOptions}
            tableConfig={false}
            exportConfig={false}
            refreshOnActivated={false}
            style="padding: 0;"
          ></CommonList>
        </div>
        <div style={'width:100%;display: flex;justify-content: center;padding: 20px;gap: 20px;'}>
          <Button
            onClick={() => {
              isCommonModalShow.value = false
            }}
          >
            {t('取消')}
          </Button>
          <Button
            type="primary"
            onClick={() => {
              isCommonModalShow.value = false
            }}
          >
            {t('确定')}
          </Button>
        </div>
      </Modal>
    ) : null
  }

  return { openCommonModal, CommonModal }
}
